<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery插件:Tablesorter 2.0 -附加表格数据和ajax传输</title>
<link rel="stylesheet" href="css/jq.css" type="text/css" media="print, projection, screen" />
<link rel="stylesheet" href="../themes/blue/style.css" type="text/css" media="print, projection, screen" />
<script type="text/javascript" src="../jquery-1.1.3.js"></script>
<script type="text/javascript" src="../jquery.tablesorter.js"></script>
<script type="text/javascript" src="../addons/pager/jquery.tablesorter.pager.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	
	//jQuery插件:Tablesorter 2.0 -默认状态下表格参数设置
	$(".table-00").tablesorter();
	
	//jQuery插件:Tablesorter 2.0 -附加表格数据和ajax传输    以下截止换行
	$(".table-01").tablesorter();
	$("#ajax-append").click(function(){
		$.get("assets/ajax-content.html",function(html) {
			// append the "ajax'd" data to the table body
			$(".table-01 > tbody").append(html);
			// let the plugin know that we made a update
			$(".table-01").trigger("update");
			// set sorting column and direction, this will sort on the first and third column
			var sorting = [[0,0],[2,0]];
			// sort on the first column
			$(".table-01").trigger("sorton",[sorting]);
		});
		return false;
	});
	
	// jQuery插件:Tablesorter 2.0 - 扩展默认选项   以下截止换行
	// extend the default setting to always include the zebra widget.
	$.tablesorter.defaults.widgets = ['zebra'];
	// extend the default setting to always sort on the first column
	$.tablesorter.defaults.sortList = [[0,0]];
	// call the tablesorter plugin
	$(".table-02").tablesorter();
	
	//jQuery插件:Tablesorter 2.0 - 禁用标题数据自定义使用
	$(".table-03").tablesorter({
		headers:{1:{sorter:false},2:{sorter:false}}
	}); 
	
	//jQuery插件:Tablesorter 2.0 - 加jQuery分页插件控制表格分页显示
	$(".table-04").tablesorter({widthFixed: true}).tablesorterPager({container: $("#pager")});
		
}); 		
</script>
</head>
<body>
	
	<div id="main">
		<h1>jQuery插件:Tablesorter 2.0 -默认状态下表格参数设</h1>
		<div id="demo">
			<table cellspacing="1" class="tablesorter table-00">
				<thead>
					<tr>
						<th>First Name</th>
						<th>Last Name</th>
						<th>Age</th>
						<th>Total</th>
						<th>Discount</th>
						<th>Date</th>
		
					</tr>
				</thead>
				<tbody>
					<tr>
						<td>Peter</td>
						<td>Parker</td>
						<td>28</td>
						<td>$9.99</td>
						<td>20%</td>
						
						<td>Jul 6, 2006 8:14 AM</td>
					</tr>
					<tr>
						<td>John</td>
						<td>Hood</td>
						<td>33</td>
						<td>$19.99</td>
						<td>25%</td>
						
						<td>Dec 10, 2002 5:14 AM</td>
					</tr>
					<tr>
						<td>Clark</td>
						<td>Kent</td>
						<td>18</td>
						<td>$15.89</td>
						<td>44%</td>
						<td>Jan 12, 2003 11:14 AM</td>
					</tr>
					<tr>
						<td>Bruce</td>
						<td>Almighty</td>
						<td>45</td>
						<td>$153.19</td>
						<td>44%</td>
						
						<td>Jan 18, 2001 9:12 AM</td>
					</tr>
					<tr>
						<td>Bruce</td>
						<td>Evans</td>
						<td>22</td>
						<td>$13.19</td>
						<td>11%</td>
						<td>Jan 18, 2007 9:12 AM</td>
					</tr>
				</tbody>
			</table>
		</div>
	</div>
	
	<div id="main">
		<h1>jQuery插件:Tablesorter 2.0 -附加表格数据和ajax传输</h1>
		<div id="demo">
			<table cellspacing="1" class="tablesorter table-01">
				<thead>
					<tr>
						<th>First Name</th>
						<th>Last Name</th>
						<th>Age</th>
						<th>Total</th>
						<th>Discount</th>
						<th>Date</th>
		
					</tr>
				</thead>
				<tbody>
					<tr>
						<td>Peter</td>
						<td>Parker</td>
						<td>28</td>
						<td>$9.99</td>
						<td>20%</td>
						
						<td>Jul 6, 2006 8:14 AM</td>
					</tr>
					<tr>
						<td>John</td>
						<td>Hood</td>
						<td>33</td>
						<td>$19.99</td>
						<td>25%</td>
						
						<td>Dec 10, 2002 5:14 AM</td>
					</tr>
					<tr>
						<td>Clark</td>
						<td>Kent</td>
						<td>18</td>
						<td>$15.89</td>
						<td>44%</td>
						<td>Jan 12, 2003 11:14 AM</td>
					</tr>
					<tr>
						<td>Bruce</td>
						<td>Almighty</td>
						<td>45</td>
						<td>$153.19</td>
						<td>44%</td>
						
						<td>Jan 18, 2001 9:12 AM</td>
					</tr>
					<tr>
						<td>Bruce</td>
						<td>Evans</td>
						<td>22</td>
						<td>$13.19</td>
						<td>11%</td>
						<td>Jan 18, 2007 9:12 AM</td>
					</tr>
				</tbody>
			</table>
			<a href="#" id="ajax-append">追加表格数据</a>
		</div>
	</div>
	
	<div id="main">
		<h1>jQuery插件:Tablesorter 2.0 - 扩展默认选项</h1>
		<div id="demo">
			<table cellspacing="1" class="tablesorter table-02">
			<thead>
					<tr>
						<th>First Name</th>
						<th>Last Name</th>
						<th>Age</th>
						<th>Total</th>
						<th>Discount</th>
						<th>Date</th>
		
					</tr>
				</thead>
				<tbody>
					<tr>
						<td>Peter</td>
						<td>Parker</td>
						<td>28</td>
						<td>$9.99</td>
						<td>20%</td>
						
						<td>Jul 6, 2006 8:14 AM</td>
					</tr>
					<tr>
						<td>John</td>
						<td>Hood</td>
						<td>33</td>
						<td>$19.99</td>
						<td>25%</td>
						
						<td>Dec 10, 2002 5:14 AM</td>
					</tr>
					<tr>
						<td>Clark</td>
						<td>Kent</td>
						<td>18</td>
						<td>$15.89</td>
						<td>44%</td>
						<td>Jan 12, 2003 11:14 AM</td>
					</tr>
					<tr>
						<td>Bruce</td>
						<td>Almighty</td>
						<td>45</td>
						<td>$153.19</td>
						<td>44%</td>
						
						<td>Jan 18, 2001 9:12 AM</td>
					</tr>
					<tr>
						<td>Bruce</td>
						<td>Evans</td>
						<td>22</td>
						<td>$13.19</td>
						<td>11%</td>
						<td>Jan 18, 2007 9:12 AM</td>
					</tr>
				</tbody>
			</table>
		</div>
	</div>
	
	<div id="main">
		<h1>jQuery插件:Tablesorter 2.0 - 禁用标题数据自定义使用</h1>
		<div id="demo">
			<table cellspacing="1" class="tablesorter table-03">
				<thead>
					<tr>
						<th class="{sorter: false}">First Name</th>
						<th>Last Name</th>
						<th>Age</th>
						<th>Total</th>
						<th class="{sorter: false}">Discount</th>
						<th>Date</th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td>Peter</td>
						<td>Parker</td>
						<td>28</td>
						<td>$9.99</td>
						<td>20%</td>	
						<td>Jul 6, 2006 8:14 AM</td>
					</tr>
					<tr>
						<td>John</td>
						<td>Hood</td>
						<td>33</td>
						<td>$19.99</td>
						<td>25%</td>
						
						<td>Dec 10, 2002 5:14 AM</td>
					</tr>
					<tr>
						<td>Clark</td>
						<td>Kent</td>
						<td>18</td>
						<td>$15.89</td>
						<td>44%</td>
						<td>Jan 12, 2003 11:14 AM</td>
					</tr>
					<tr>
						<td>Bruce</td>
						<td>Almighty</td>
						<td>45</td>
						<td>$153.19</td>
						<td>44%</td>
						
						<td>Jan 18, 2001 9:12 AM</td>
					</tr>
					<tr>
						<td>Bruce</td>
						<td>Evans</td>
						<td>22</td>
						<td>$13.19</td>
						<td>11%</td>
						<td>Jan 18, 2007 9:12 AM</td>
					</tr>
				</tbody>
			</table>
		</div>
	</div>
	
	<div id="main">
		<h1>jQuery插件:Tablesorter 2.0 - 加jQuery分页插件控制表格分页显示</h1>
		<table cellspacing="1" class="tablesorter table-04">
			<thead>
				<tr>
					<th>Name</th>
					<th>Major</th>
					<th>Sex</th>
					<th>English</th>
					<th>Japanese</th>
					<th>Calculus</th>
					<th>Geometry</th>
		
				</tr>
			</thead>
			<tfoot>
				<tr>
					<th>Name</th>
					<th>Major</th>
					<th>Sex</th>
					<th>English</th>
					<th>Japanese</th>
					<th>Calculus</th>
					<th>Geometry</th>
		
				</tr>
			</tfoot>
			<tbody>
				<tr>
					<td>Student01</td>
					<td>Languages</td>
					<td>male</td>
		
					<td>80</td>
					<td>70</td>
					<td>75</td>
					<td>80</td>
				</tr>
				<tr>
					<td>Student02</td>
		
					<td>Mathematics</td>
					<td>male</td>
					<td>90</td>
					<td>88</td>
					<td>100</td>
					<td>90</td>
		
				</tr>
				<tr>
					<td>Student03</td>
					<td>Languages</td>
					<td>female</td>
					<td>85</td>
					<td>95</td>
		
					<td>80</td>
					<td>85</td>
				</tr>
				<tr>
					<td>Student04</td>
					<td>Languages</td>
					<td>male</td>
		
					<td>60</td>
					<td>55</td>
					<td>100</td>
					<td>100</td>
				</tr>
				<tr>
					<td>Student05</td>
		
					<td>Languages</td>
					<td>female</td>
					<td>68</td>
					<td>80</td>
					<td>95</td>
					<td>80</td>
		
				</tr>
				<tr>
					<td>Student06</td>
					<td>Mathematics</td>
					<td>male</td>
					<td>100</td>
					<td>99</td>
		
					<td>100</td>
					<td>90</td>
				</tr>
				<tr>
					<td>Student07</td>
					<td>Mathematics</td>
					<td>male</td>
		
					<td>85</td>
					<td>68</td>
					<td>90</td>
					<td>90</td>
				</tr>
				<tr>
					<td>Student08</td>
		
					<td>Languages</td>
					<td>male</td>
					<td>100</td>
					<td>90</td>
					<td>90</td>
					<td>85</td>
		
				</tr>
				<tr>
					<td>Student09</td>
					<td>Mathematics</td>
					<td>male</td>
					<td>80</td>
					<td>50</td>
		
					<td>65</td>
					<td>75</td>
				</tr>
				<tr>
					<td>Student10</td>
					<td>Languages</td>
					<td>male</td>
		
					<td>85</td>
					<td>100</td>
					<td>100</td>
					<td>90</td>
				</tr>
				<tr>
					<td>Student11</td>
		
					<td>Languages</td>
					<td>male</td>
					<td>86</td>
					<td>85</td>
					<td>100</td>
					<td>100</td>
		
				</tr>
				<tr>
					<td>Student12</td>
					<td>Mathematics</td>
					<td>female</td>
					<td>100</td>
					<td>75</td>
		
					<td>70</td>
					<td>85</td>
				</tr>
				<tr>
					<td>Student13</td>
					<td>Languages</td>
					<td>female</td>
		
					<td>100</td>
					<td>80</td>
					<td>100</td>
					<td>90</td>
				</tr>
				<tr>
					<td>Student14</td>
		
					<td>Languages</td>
					<td>female</td>
					<td>50</td>
					<td>45</td>
					<td>55</td>
					<td>90</td>
		
				</tr>
				<tr>
					<td>Student15</td>
					<td>Languages</td>
					<td>male</td>
					<td>95</td>
					<td>35</td>
		
					<td>100</td>
					<td>90</td>
				</tr>
				<tr>
					<td>Student16</td>
					<td>Languages</td>
					<td>female</td>
		
					<td>100</td>
					<td>50</td>
					<td>30</td>
					<td>70</td>
				</tr>
				<tr>
					<td>Student17</td>
		
					<td>Languages</td>
					<td>female</td>
					<td>80</td>
					<td>100</td>
					<td>55</td>
					<td>65</td>
		
				</tr>
				<tr>
					<td>Student18</td>
					<td>Mathematics</td>
					<td>male</td>
					<td>30</td>
					<td>49</td>
		
					<td>55</td>
					<td>75</td>
				</tr>
				<tr>
					<td>Student19</td>
					<td>Languages</td>
					<td>male</td>
		
					<td>68</td>
					<td>90</td>
					<td>88</td>
					<td>70</td>
				</tr>
				<tr>
					<td>Student20</td>
		
					<td>Mathematics</td>
					<td>male</td>
					<td>40</td>
					<td>45</td>
					<td>40</td>
					<td>80</td>
		
				</tr>
				<tr>
					<td>Student21</td>
					<td>Languages</td>
					<td>male</td>
					<td>50</td>
					<td>45</td>
		
					<td>100</td>
					<td>100</td>
				</tr>
				<tr>
					<td>Student22</td>
					<td>Mathematics</td>
					<td>male</td>
		
					<td>100</td>
					<td>99</td>
					<td>100</td>
					<td>90</td>
				</tr>
				<tr>
					<td>Student23</td>
		
					<td>Languages</td>
					<td>female</td>
					<td>85</td>
					<td>80</td>
					<td>80</td>
					<td>80</td>
				</tr>
			</tbody>
		</table>
		<div id="pager" class="pager">
			<form>
				<img src="../addons/pager/icons/first.png" class="first"/>
				<img src="../addons/pager/icons/prev.png" class="prev"/>
				<input type="text" class="pagedisplay"/>
				<img src="../addons/pager/icons/next.png" class="next"/>
				<img src="../addons/pager/icons/last.png" class="last"/>
				<select class="pagesize">
					<option selected="selected"  value="10">10</option>
					<option value="20">20</option>
					<option value="30">30</option>
				</select>
			</form>
		</div>
	</div>
	
	<div id="main">
		<h1>更多使用方法，请下载<a href="#">演示特效</a>。</h1>
	</div>	
</body>
</html>
